<template>
  <page-header-wrapper>
    <a-card style="margin-bottom: 11px" :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="20">
            <a-col :md="4" :sm="24">
              <a-form-item>
                <a-input-search v-model="queryParam.name" placeholder="请输入商品名称搜索" />
              </a-form-item>
            </a-col>
            <a-col :md="5" :sm="24">
              <a-form-item label="商品分类">
                <a-cascader
                  v-if="showCat"
                  :options="catList"
                  @change="onCascaderChange"
                  :fieldNames="{ label: 'name', value: 'id', children: 'children' }"
                  placeholder="请选择商品分类"
                />
              </a-form-item>
            </a-col>
            <!-- <a-col :md="5" :sm="24">
              <a-form-item label="产品类型">
                <a-select placeholder="请选择" v-model="queryParam.product_type" default-value="-1">
                  <a-select-option value="-1">全部</a-select-option>
                  <a-select-option value="0">普通商品</a-select-option>
                  <a-select-option value="1">酒店预约</a-select-option>
                  <a-select-option value="2">服务预约</a-select-option>
                </a-select>
              </a-form-item>
            </a-col> -->
            <a-col :md="8" :sm="24">
              <span class="table-page-search-submitButtons" style="margin: 0">
                <a-button type="primary" @click="refresh">查询</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <a-card :bordered="false" class="card_style_re">
      <div class="table-operator">
        <NoBorderRadio @onChange="callback" :options="options" :defaultValue="-1"></NoBorderRadio>
        <div style="float: right; display: inline-block">
          <a-space class="table-operator">
            <a-dropdown>
              <a-menu slot="overlay">
                <a-menu-item key="1" @click="updateAll('status', 1)">批量上架 </a-menu-item>
                <a-menu-item key="2" @click="updateAll('status', 0)">批量下架 </a-menu-item>
                <!-- <a-menu-item key="3" @click="allSynchronization">批量同步 </a-menu-item> -->
              </a-menu>
              <a-button> 批量设置 <a-icon type="down" /> </a-button>
            </a-dropdown>
          </a-space>
        </div>
      </div>
      <a-divider />
      <GoodsListTable
        ref="-1"
        :queryParam="queryParam"
        :status="currentTab"
        v-show="currentTab == -1"
      ></GoodsListTable>
      <GoodsListTable
        ref="1"
        :queryParam="queryParam"
        :status="currentTab"
        v-show="currentTab == 1"
      ></GoodsListTable>
      <GoodsListTable
        ref="0"
        :queryParam="queryParam"
        :status="currentTab"
        v-show="currentTab == 0"
      ></GoodsListTable>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import { list as catListApi } from '@/api/goods/cat'
import GoodsListTable from './components/GoodsListTable'
import NoBorderRadio from '@/components/NoBorderRadio/NoBorderRadio'

export default {
  name: 'GoodsList',
  components: {
    STable,
    GoodsListTable,
    NoBorderRadio,
  },
  data() {
    return {
      options: [
        {
          title: '全部',
          value: -1,
        },
        {
          title: '上架中',
          value: 1,
        },
        {
          title: '已下架',
          value: 0,
        },
      ],
      currentTab: -1,
      catList: [],
      queryParam: {
        name: '',
        cat_id: 0,
        status: -1,
        mch_id: 0,
        product_type: '-1',
      },
      isShowCSVModal: false,
      showCat: true,
    }
  },
  activated() {
    this.$nextTick(() => {
      this.$refs[this.currentTab].$refs.tableList.refresh(true)
    })
  },
  created() {
    this.getCatList()
  },
  computed: {},
  watch: {
    currentTab(val) {
      this.$nextTick(() => {
        this.refresh()
        this.$refs[val].pushScrollBar()
      })
    },
  },
  methods: {
    onCascaderChange(val) {
      this.queryParam.cat_id = val[val.length - 1]
    },
    resetValue() {
      this.queryParam = { status: this.queryParam.status }
      this.showCat = false
      setTimeout(() => {
        this.showCat = true
      }, 200)
    },
    callback(key) {
      this.currentTab = key
    },
    refresh(row) {
      this.$nextTick(() => {
        this.$refs[this.currentTab].$refs.tableList.refresh(true)
      })
    },
    updateAll(type, status) {
      this.$refs[this.currentTab].updateAll(type, status)
    },
    allSynchronization() {
      // 批量同步商品
      this.$refs[this.currentTab].allSynchronization()
    },
    /**
     * 获取分类
     */
    getCatList() {
      catListApi({ is_show: -1 }).then((res) => {
        this.catList = res.data.list
      })
    },
    updateParam(value, type) {
      this.queryParam[type] = value
    },
  },
}
</script>
<style lang="less" scoped>
.table-operator {
  margin-bottom: 0;
}
.fixPosition {
  display: inline-block;
  transform: translateX(-18px);
  color: transparent;
  cursor: pointer;
}
.text_ellipsis {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.table_operator_icon {
  font-size: 18px;
  padding: 0 5px;
  color: rgb(182, 182, 182);
  cursor: pointer;
  &:hover {
    color: rgb(24, 144, 255);
  }
}
.permission-form {
  /deep/ .permission-group {
    margin-top: 0;
    margin-bottom: 0;
  }
}
.search-item {
  margin-left: 10px;
}
.min_top_height {
  /deep/.ant-card-body {
    padding-top: 10px;
  }
}
</style>
